babel-plugin-transform-es2015-for-of

What is babel-plugin-transform-es2015-for-of?

The babel-plugin-transform-es2015-for-of npm package is a plugin for Babel, a JavaScript compiler, that transforms for...of loops in ES2015 (ES6) to more compatible ES5 syntax. This transformation allows developers to use for...of loops, which iterate over iterable objects (like Arrays, Maps, Sets, etc.), in environments that do not support ES2015 syntax natively.

What are babel-plugin-transform-es2015-for-of's main functionalities?

Transform for...of loops to ES5

This feature automatically converts for...of loops into compatible ES5 syntax using a simple for loop. This allows the code to run in environments that do not support ES2015. The code sample shows how a for...of loop is transformed into a for loop that iterates over an array.

"use strict";\n\nvar _arr = [1, 2, 3];\nfor (var _i = 0; _i < _arr.length; _i++) {\n  var i = _arr[_i];\n  console.log(i);\n}

Other packages similar to babel-plugin-transform-es2015-for-of

@babel/plugin-transform-for-of

This package is part of the Babel ecosystem and offers similar functionality to babel-plugin-transform-es2015-for-of by transforming for...of loops into ES5. However, it is updated more frequently and is part of the official Babel 7 release, making it more suitable for projects using Babel 7 or later.

babel-preset-es2015

While not a direct equivalent, babel-preset-es2015 includes babel-plugin-transform-es2015-for-of among many other plugins to transform ES2015 code to ES5. It provides a broader solution for projects looking to support ES2015 features in older environments.

README

babel-plugin-transform-es2015-for-of

Compile ES2015 for...of to ES5

Example

In

for (var i of foo) {}

Out

var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;

try {
  for (var _iterator = foo[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
    var i = _step.value;
  }
} catch (err) {
  _didIteratorError = true;
  _iteratorError = err;
} finally {
  try {
    if (!_iteratorNormalCompletion && _iterator.return) {
      _iterator.return();
    }
  } finally {
    if (_didIteratorError) {
      throw _iteratorError;
    }
  }
}

Installation

npm install --save-dev babel-plugin-transform-es2015-for-of

Usage

Via .babelrc (Recommended)

.babelrc

// without options
{
  "plugins": ["transform-es2015-for-of"]
}

// with options
{
  "plugins": [
    ["transform-es2015-for-of", {
      "loose": true
    }]
  ]
}

Via CLI

babel --plugins transform-es2015-for-of script.js

Via Node API

require("babel-core").transform("code", {
  plugins: ["transform-es2015-for-of"]
});

Options

loose

boolean, defaults to false

In loose mode, arrays are put in a fast path, thus heavily increasing performance. All other iterables will continue to work fine.

Example

In

for (var i of foo) {}

Out

for (var _iterator = foo, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
  var _ref;

  if (_isArray) {
    if (_i >= _iterator.length) break;
    _ref = _iterator[_i++];
  } else {
    _i = _iterator.next();
    if (_i.done) break;
    _ref = _i.value;
  }

  var i = _ref;
}

Abrupt completions

In loose mode an iterator's return method will not be called on abrupt completions caused by thrown errors.

Please see google/traceur-compiler#1773 and babel/babel#838 for more information.

Optimization

If a basic array is used, Babel will compile the for-of loop down to a regular for loop.

In

for (let a of [1,2,3]) {}

Out

var _arr = [1, 2, 3];
for (var _i = 0; _i < _arr.length; _i++) {
  var a = _arr[_i];
}